<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">个人信息</block>
		</cu-custom>
		<view class="myinfo-tips">带*为必填项</view>
		<view class="myinfo-form">
			<view class="cu-form-group">
				<view class="myinfo-title-info">头像</view>
				<image class="myinfo-headimg" :src="headimg"></image>
			</view>
			<view class="cu-form-group">
				<view class="myinfo-title-info">昵称</view>
				{{nickname}}
			</view>
			<view class="cu-form-group">
				<view class="myinfo-title">真实姓名</view>
				<input class="text-right" placeholder="输入姓名" v-model="userinfo.realname" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="myinfo-title">联系方式</view>
				<input class="text-right"  placeholder="输入手机号" v-model="userinfo.tel" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="myinfo-title-info">网球水平等级</view>
				<picker @change="levelChange" :value="leverindex" :range="lever">
					<view class="picker">
						{{userinfo.tennie_level}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="myinfo-title-info">身份证号</view>
				<input class="text-right" type="idcard"  placeholder="输入身份证号" v-model="userinfo.identitycard" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="myinfo-title-info">出生日期</view>
				<picker mode="date" :value="date" @change="DateChange">
					<view class="picker">
						{{userinfo.birthday}}
					</view>
				</picker>
				
			</view>
			<view class="cu-form-group">
				<view class="myinfo-title-info">性别</view>
				<picker @change="sexChange" :value="sexindex" :range="sex">
					<view class="picker">
						{{userinfo.sex==1?'男':'女'}}
					</view>
				</picker>
			</view>
			<view class="flex padding flex-direction">
				<button class="cu-btn bg-blue lg" @click="saveMyinfo">保存</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option){
			console.log(option);
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			console.log(this.openid);
			if(this.userid.length<=0 || this.openid.length<=0){
				uni.showModal({
				    title: '提示',
				    content: '您暂未登陆,是否马上登陆',
				    success: function (res) {
				        if (res.confirm) {
				           uni.switchTab({
				           	url:"/pages/tennis/user/index"
				           })
				        } else if (res.cancel) {
				           uni.navigateBack({
				           	
				           })
				        }
				    }
				});
				return;
			}
			this.headimg=option.hi;
			this.nickname=option.nn;
			uni.showLoading({
				title:'加载中..'
			})
			uni.request({
				url: 'https://www.52tennis.cn/User/GetUserInfo', //仅为示例，并非真实接口地址。
				data: {
					id:this.userid
				},
				success:(data)=> {
					
					console.log(data);
					if(data.data.result==1){
						this.userinfo = data.data.returnjson;
					}else{
						uni.showToast({
							title: '请求错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				fail:(res)=>{
					uni.showToast({
						title: '请求失败',
						icon: 'fail',
						mask: true,
						duration: 2000
					})
				},
				complete:()=>{
					uni.hideLoading();
				}
			})
			
		},
		data() {
			return {
				userid:'',
				openid:'',
				headimg:'',
				nickname:'',
				date:'1990-01-01',
				leverindex: 0,
				lever: ['1.0', '1.5', '2.0','2.5','3.0','3.5','4.0','4.5','5.0以及以上'],
				sex:['男','女'],
				sexindex:0,
				userinfo:[],
			}
		},
		methods: {
			levelChange(e){
				this.leverindex = e.detail.value
				this.userinfo.tennie_level =this.lever[this.leverindex];
			},
			DateChange(e){
				this.date=e.detail.value;
				this.userinfo.birthday=e.detail.value;
			},
			sexChange(e){
				this.sexindex=e.detail.value;
				if(this.sex[this.sexindex]=="男"){
					this.userinfo.sex=1;
				}else{
					this.userinfo.sex=0;
				}
			},
			saveMyinfo(e){
				//updateUserInfo
				console.log(this.userid);
				if(this.userinfo.realname.length<=0 || this.userinfo.tel.length<=0 ){
					uni.showModal({
					    title: '保存失败',
					    content: "请将姓名电话填写完整",
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
					return;
				}
				var reg=/^1[3456789]\d{9}$/;
				if(!reg.test(this.userinfo.tel)){
					uni.showModal({
					    title: '保存失败',
					    content: "联系电话输入有误",
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
					return;
				}
				console.log("网球等级:"+this.lever[this.leverindex])
				uni.showLoading({
					title:'保存中...'
				})
				uni.request({
					url:"https://www.52tennis.cn/User/updateUserInfo",
					header:{
						'Content-Type': 'application/json;charset=UTF-8' //自定义请求头信息
					},
					method:'POST',
					data: {
						"uid":this.userid,
						"realName" :this.userinfo.realname,
						"tel":this.userinfo.tel,
						"level":this.userinfo.tennie_level,
						"identityCard":this.userinfo.identitycard,
						"birthday" :this.userinfo.birthday,
						"sex":this.userinfo.sex=="1"?"男":"女"
					},success:(data)=> {
						if(data.data.result==1){
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								mask: true,
								duration: 3000
							})
							setTimeout(function(){
								uni.navigateTo({
									url:"/pages/tennis/user/index"
								})
							},2000)
							
						}else{
							uni.showModal({
							    title: '保存失败',
							    content: data.data.msg,
							    success: function (res) {
							        if (res.confirm) {
							           uni.navigateTo({
							           		url:"/pages/tennis/user/index"
							           })
							        } else if (res.cancel) {
							           uni.navigateTo({
							           		url:"/pages/tennis/user/index"
							           })
							        }
							    }
							});
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			}
			
			
			
		}
	}
</script>

<style>
	.myinfo-tips{
		padding-left: 30rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #ED1C24;
	}
	.myinfo-headimg{
		width:60rpx;
		height:60rpx;
		border-radius: 50%;
	}
	
	.myinfo-title::before{
		content: '*';
		color: #ED1C24;
	}
</style>
